<template>
	<!-- 跑马灯 -->
	<view class="content page" :class="{minH:isComponent==1}" :style="{'background-image':'url(' + $imgUrls(getactrule.backImg) + ')'}">
		<status-bar :title='getactrule.title' :goHome='fromShare'></status-bar>
		<view class="contentallbox" v-if='!msg'>
			<image class="bsimg" :src="getactrule.img!=''?$imgUrls(getactrule.img) :staticUrl+'/lottery/luck.png'" mode="widthFix"></image>
			<image class="tiImg" :src="staticUrl+'/lottery/cjbj.png'" mode="widthFix"></image>
			<view class="animetionBox">
				<view class="rdturntable" v-for="(tr,i) in turntable_r" :key="i" :style="{
					'background':tr.bg,
					'transform':tr.transform,
					'box-shadow':'0 0 10px 1px'+tr.bg
					}
				"></view>
				<view class="contensAll">
					<!-- selects -->
					<view class="prizeList" v-for="(prize,i) in arrys" :key="i" v-if="i<4" :class="prizeNum == i?'selects':''">
						<view class="listItem" :style="{background: prizeNum == i ? '#ffe27d' : '#FFFFFF'}">
							<image class="prizeImage" :src="prize.img!=''?$imgUrls(prize.img):staticUrl+'/lottery/thanks.png'" mode="aspectFit"></image>
							<view class="prizeTitle">{{prize.title!=''?prize.title:'谢谢参与'}}</view>
						</view>
					</view>
				
					<view class="prizeList clickPrize" @click="draw">
						<view class="listItem">
							<image class="clickImage" :src="staticUrl+'/lottery/clickPrize.png'" mode="aspectFit"></image>
						</view>
					</view>
					<view class="prizeList" v-for="(prizes,j) in arrys" :key="j" v-if="j>3&&j<arrys.length" :class="prizeNum == j?'selects':''">
						<view class="listItem" :style="{background: prizeNum == j ? '#ffe27d' : '#FFFFFF'}">
						<image class="prizeImage" :src="prizes.img!=''?$imgUrls(prizes.img):staticUrl+'/lottery/thanks.png'" mode="aspectFit"></image>
						<view class="prizeTitle">{{prizes.title!=''?prizes.title:'谢谢参与'}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="winning">
				<swiper autoplay="true" interval="3000" duration="1000" circular="true" vertical="true" class="swiper" disable-touch="true">
					<swiper-item v-for="(winn,index) in getactrule.winningUser" :key="index">
						<view class="swiper-item">{{winn.text}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="btnBox">
				<view @click="btnlook(3)" class="view_btn" :style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">活动说明</view>
				<view @click="btnlook(2)" class="view_btn" :style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">我的奖品</view>
			</view>
		</view>
		<empty type='1' v-if='msg' cat='2' :msg='msg'></empty>
		<showModel @cancelFunc='closeModel' v-if='showModal' type='2'></showModel>
		<Popup v-if="PopupIsShow" :viewText="getactrule.details" :types="types" :prizeDate="prizeDate" @closepopup="closePopups"></Popup>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import Popup from "../components/popup.vue"
	var that;
	export default{
		props:['gid','isComponent'],
		components:{
			Popup
		},
		data(){
			return{
				showModal: false,
				turntable_r:[
					{transform: 'translate(0, 0);',bg:'#FDAAA2'},
					{transform: 'translate(90.4rpx, -12rpx)',bg:'#FBDE78'},
					{transform: 'translate(180.8rpx, -12rpx)',bg:'#FDAAA2'},
					{transform: 'translate(271.2rpx, -12rpx)',bg:'#FBDE78'},
					{transform: 'translate(361.6rpx, -12rpx)',bg:'#FDAAA2'},
					{transform: 'translate(452rpx, -12rpx)',bg:'#FBDE78'},
					{transform: 'translate(542.4rpx, -12rpx)',bg:'#FDAAA2'},
					{transform: 'translate(632rpx, 0)',bg:'#FBDE78'},
					{transform: 'translate(638rpx, 90rpx)',bg:'#FDAAA2'},
					{transform: 'translate(638rpx, 180rpx)',bg:'#FBDE78'},
					{transform: 'translate(638rpx, 270rpx)',bg:'#FDAAA2'},
					{transform: 'translate(638rpx, 360rpx)',bg:'#FBDE78'},
					{transform: 'translate(638rpx, 450rpx)',bg:'#FDAAA2'},
					{transform: 'translate(632rpx, 540rpx)',bg:'#FBDE78'},
					{transform: 'translate(542.4rpx, 549rpx)',bg:'#FDAAA2'},
					{transform: 'translate(452rpx, 549rpx)',bg:'#FBDE78'},
					{transform: 'translate(361.6rpx, 549rpx)',bg:'#FDAAA2'},
					{transform: 'translate(271.2rpx, 549rpx)',bg:'#FBDE78'},
					{transform: 'translate(180.8rpx, 549rpx)',bg:'#FDAAA2'},
					{transform: 'translate(90.4rpx, 549rpx)',bg:'#FBDE78'},
					{transform: 'translate(0, 539rpx)',bg:'#FDAAA2'},
					{transform: 'translate(-6rpx, 450rpx)',bg:'#FBDE78'},
					{transform: 'translate(-6rpx, 360rpx)',bg:'#FDAAA2'},
					{transform: 'translate(-6rpx, 270rpx)',bg:'#FBDE78'},
					{transform: 'translate(-6rpx, 180rpx)',bg:'#FDAAA2'},
					{transform: 'translate(-6rpx, 90rpx)',bg:'#FBDE78'}
				],
				prizeNum:0,
				PopupIsShow:false,
				types:'',//弹窗类型
				prizeArry:[0,1,2,4,7,6,5,3],
				arrys:'',
				nums:0,
				cid: uni.getStorageSync('lottery_cid'),
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				getactrule:'',
				prizeDate:'',//抽奖返回数据
				positions:0,
				whirl:1,
				losing:[],
				r:0,
				msg:'',
				ondrawing: false,// true正在抽奖 避免重复点击
				fromShare:0, // 是否来自分享 1是 显示返回首页
			}
		},
		computed: {
			...mapState(['bid'])
		},
		created() {
			if(this.isComponent == 1){
				that = this
				that.cid = this.gid
				that.getinitialdata()//获取活动配置信息
				that.marquees()
				that.getPageData()//获取奖品列表
				
			}
		},
		onLoad(e) {
			that = this
			if(e.bid) that.getUser({bid: e.bid})
			if(e.cid){
				that.cid = e.cid
				that.getinitialdata()//获取活动配置信息
				that.marquees()
				that.getPageData()//获取奖品列表
			}
			if(e.fromShare){that.fromShare = e.fromShare}
			
		},
		onShareAppMessage() {
			that.$addShareNum('games', that.cid, '1')
			let vid = uni.getStorageSync('vid')				
			return {
				title: that.getactrule.title,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=17&gid=marquee&cid='+that.cid
			}
		},
		onShareTimeline() {
			that.$addShareNum('games', that.cid, '2')
			let vid = uni.getStorageSync('vid')
			return {
				title: that.getactrule.title,	
				query: `share_v_id=${vid}&cid=${that.cid}&bid=${that.bid}&fromShare=1`,
				imageUrl: that.$imgUrls(that.getactrule.img)
			}
		},
		methods:{
			...mapMutations(['getUser']),
			closeModel(){
				that.showModal = false
				that.getinitialdata()//获取活动配置信息
				that.marquees()
			},
			draw(){
				let vid = uni.getStorageSync("vid")
				if(vid == 0 || !vid){
					that.showModal = true
					return
				}
				// this.prizeNum = i-1
				if(that.ondrawing){
					return
				}
				that.ondrawing = true
				that.$http.post({
					url: '/SRA_LuckDraw/getPrize',
					data: {
						VeriCode: that.bid,
						cid: that.cid,
						v_id: vid
					}
				}).then(res => {
					if(res.code == 100 && res.data){
						if(res.data.prizeDate){
							that.prizeDate = res.data
							that.positions = that.prizeDate.prizeDate.position-1
							let setin = setInterval(()=>{
								if(that.nums >= that.prizeArry.length-1){
									that.nums = 0;
									if(that.r > 2){
										setTimeout(()=>{
											clearInterval(setin)
											for(let n in that.prizeArry){
												if(that.prizeArry[n] == that.positions){
													that.prizeNum=that.prizeArry[n]
													return
												}
											}
											that.nums = that.positions
										},3000)
									} else{
										that.r+=1
									}
									
								} else {
									that.nums+=1
								}
								that.prizeNum = that.prizeArry[that.nums]
							},50)
							setTimeout(()=>{
								that.btnlook(1)
								that.ondrawing = false
							},5500)
						} else {
							let setin = setInterval(()=>{
								if(that.nums >= that.prizeArry.length-1){
									that.nums = 0;
								} else {
									that.nums += 1
								}
								that.prizeNum = that.prizeArry[that.nums]
							},50)
							setTimeout(()=>{
								clearInterval(setin)
								let math = that.losing[Math.floor(Math.random()*(that.losing.length))]
								for(let n in that.prizeArry){
									if(that.prizeArry[n] == math){
										that.prizeNum = that.prizeArry[n]
										return
									}
								}
								that.nums = that.prizeArry[that.losing[Math.floor(Math.random()*(that.losing.length))]]
							},3000)
							setTimeout(()=>{
								that.btnlook(1)
								that.ondrawing = false
							},5500)
						}
					} else {
						that.ondrawing = false
						uni.showToast({
							icon: "none",
							title: res.notice,
							duration: 2000
						})
					}
				})
			},
			marquees(){
				setInterval(()=>{
					for (let col in that.turntable_r) {
						if(that.turntable_r[col].bg == '#FDAAA2'){
							that.turntable_r[col].bg = '#FBDE78'
						}else {
							that.turntable_r[col].bg = '#FDAAA2'
						}
					}
				},300)
			},
			btnlook(i){
				if(i==1){
					that.PopupIsShow = true
					that.types = i
					
				} else if(i==2) {
					uni.getStorage({
						key: 'vid',
						success: function(res){
							if(!res.data){
								that.showModal = true
							}else{
								uni.navigateTo({
									url:"prizeList?cid="+that.cid
								})
							}
						},
						fail() {
							that.showModal = true
						}
					})
				} else if(i==3) {
					that.PopupIsShow = true
					that.types = i
				}
			},
			closePopups(){
				that.PopupIsShow = false
				that.getinitialdata()
			},
			//获取活动配置信息
			getinitialdata(){
				that.$http.post({
					url: '/SRA_LuckDraw/config',
					data: {
						VeriCode: that.bid,
						cid: that.cid
					}
				}).then(res => {
					if(res.data && res.code == 100){
						that.getactrule = res.data
						uni.setNavigationBarTitle({
							title: res.data.title
						})
					}else{
						that.msg = res.notice
					}
				})
			},
			getPageData(){
				that.$http.post({
					url: '/SRA_LuckDraw/prizeList',
					data: {
						VeriCode: that.bid,
						cid: that.cid
					}
				}).then(res => {
					if(res.data && res.code == 100){
						that.arrys = res.data
						for(let j in that.arrys){
							if(that.arrys[j].title == ''){
								that.losing.push(j)
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding-top: 40rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		&.minH{
			min-height: calc(100vh - 100rpx)!important;
		}
		.contentallbox{
			.bsimg{
				width: 85%;
				display: block;
				margin: 0 auto;
				position: relative;
				z-index: 2;
			}
			
			.tiImg{
				width: 100%;
				display: block;
				margin: 0 auto;
				margin-top: -80rpx;
			}
			.animetionBox{
				width: 674upx;
				height: 590upx;
				margin: 0 auto;
				margin-top: -660rpx;
				border-radius: 34upx;
				padding: 30upx;
				position: relative;
				.rdturntable{
					width: 20upx;
					height: 20upx;
					border-radius: 100%;
					background: #FFFFFF;
					z-index: 51;
					position: absolute;
					left: 12rpx;
					top: 20rpx;
				}
			}
			.winning{
				width: 500rpx;
				margin: 0 auto;
				height: 60upx;
				color: #FFFFFF;
				bottom: 148upx;
				text-align: center;
				line-height: 60upx;
			}
			.btnBox{
				display: flex;
				justify-content: center;
				.view_btn {
					width: 310rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 32upx;
					color: #ae1f30;
					margin: 40rpx 16rpx;
				}
			}
		}
	}
	
	
	.contensAll{width: 100%;height: 100%;position: relative;z-index: 50;background: #AF0B1C;border-radius: 20upx;padding: 4upx;padding-right: 0;padding-bottom: 0;display: flex;justify-content: flex-start;flex-wrap: wrap;}
	
	.prizeList{width: calc(33.3% - 4upx);height:  calc(33.3% - 4upx);border-radius: 20upx;background: #FDBFC0;position: relative;margin-right: 4upx;margin-bottom: 4upx;text-align: center;line-height: 50upx;}
	.selects{background: #c09f2c;padding: 4upx;}
	.listItem{width: 100%;height: 85%;border-radius: 20upx;background: #FFFFFF;}
	.clickPrize{background: #E18C0E;}
	.clickPrize .listItem{background: #FBE21B;overflow: hidden;}
	.clickImage{width: 100%;height: 100%;}
	.prizeImage{width: 60%;height: 60%;margin-top: 5%;}
	.prizeTitle{font-size: 30upx;color: #FE410B;padding: 0 10upx;overflow: hidden;white-space: nowrap;width: 90%;margin-left: 5%;letter-spacing: 4upx;}
	.swiper{width: 100%;height: 100%;}
	
	
	
	
	
	
</style>
